<template>
    <div class="wrap">
       <div>
          <dl>
              <dt>
                  <img :src="img">
              </dt>
              <dd>
                  <h2>
                     {{title}}
                  </h2>
                  <h3>
                      <span>满五年</span>
                      <span>VR看装修</span>
                      <span>近地铁</span>
                      <span>随时可看</span>
                  </h3>
                  <h4>
                      {{details}}
                  </h4>
                  <div>
                      <p>
                          <span>{{total}}</span>万
                      </p>
                      <span>{{price}}</span>
                  </div>
              </dd>
          </dl>
         
       </div>

    </div>
</template>

<script>
export default {
    props:["title","details","total","price","img"],
    data(){
        return{

        }
    },
    mounted(){
        
    },
    
}
</script>

<style scoped>
    .wrap{
         font-size: 0.12rem;
    }
    dl{
        display: flex;
       flex-direction: row;
       padding: 0.1rem 0.2rem;
      
    }
    dl img {
        width: 1.25rem;
        height: 1.22rem;
    }
     dl h2{
         font-weight: bold;
         font-size: 0.15rem;
     }
     dl h3,h4{
         font-size: 0.1rem;
     }
     dl h3 span{
         margin-right: 0.1rem;
     }
     dl div{
         display: flex;
         align-items: flex-end;
     }
     dl div p{
         font-size: 0.1rem;
        margin-right: 0.1rem;
     }
     dl div span{
         font-size: 0.1rem;
        
        
     }
     dl div p span{
         color: red;
         font-size: 0.16rem;
     }
     dl dd{
         display: flex;
         flex-direction: column;
         justify-content: space-between;
        margin-left: 0.15rem;
     }

</style>